<template>
  <div class="materialCategory-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      title="配方详情"
      width="650px"
    >
      <div style="padding-right: 50px; padding: 0px 20px">
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="100"
        >
          <div style="margin-top: 10px; border-top: 1px solid #eee">
            <h1 style="margin: 12px 0">基础数据</h1>
            <div class="content">
              <el-form-item
                style="margin-bottom: 0px"
                label="配方编码:"
                prop="number"
              >
                <div>{{ modelValue.form.number }}</div>
              </el-form-item>
              <el-form-item
                style="margin-bottom: 0px"
                label="配方名称:"
                prop="name"
              >
                <div>{{ modelValue.form.name }}</div>
              </el-form-item>
              <el-form-item
                style="margin-bottom: 0px"
                label="配方类型:"
                prop="categoryName"
              >
                <div>{{ modelValue.form.categoryName }}</div>
              </el-form-item>
              <el-form-item
                style="margin-bottom: 0px"
                label="状态:"
                prop="enabled"
              >
                <div>{{ modelValue.form.enabled ? '启用' : '禁用' }}</div>
              </el-form-item>
              <el-form-item
                style="margin-bottom: 0px"
                label="备注:"
                prop="remark"
              >
                <div>{{ modelValue.form.remark }}</div>
              </el-form-item>
            </div>
          </div>
          <div style="margin-top: 20px; border-top: 1px solid #eee">
            <h1 style="margin: 10px 0px">配方数据</h1>
            <div class="content">
              <el-table
                border
                :data="modelValue.form.productSteps"
                stripe
                size="small"
              >
                <el-table-column prop="seq" label="步骤号" width="65" />
                <el-table-column prop="name" label="物料" min-width="150">
                  <template #default="scope">
                    {{ scope.row.name || scope.row.materialName }}
                  </template>
                </el-table-column>
                <el-table-column prop="operate" label="是否需要温度" width="95">
                  <template #default="scope">
                    {{ scope.row.temperatureRequired ? '是' : '否' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="minTemperature"
                  label="最低温度"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="maxTemperature"
                  label="最高温度"
                  width="80"
                >
                </el-table-column>
                <el-table-column prop="value" label="标准量" width="60">
                  <template #default="scope">
                    {{ scope.row.finalValue || 0 }}g
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div style="margin-top: 20px; border-top: 1px solid #eee">
            <h1 style="margin: 10px 0px">选项配置</h1>
            <div class="content">
              <el-form-item
                style="margin-bottom: 0px"
                v-for="item in modelValue.form.productSpecGroups"
                :key="item.id"
                :label="`${item.name}:`"
              >
                <text v-for="(subItem, subIndex) in item.specList">
                  <text v-if="subIndex != item.specList.length - 1">
                    {{ subItem.name }}、</text
                  >
                  <text v-else>{{ subItem.name }}</text>
                </text>
              </el-form-item>
              <!-- productSpecGroups -->
            </div>
          </div>
          <div style="margin-top: 20px; border-top: 1px solid #eee">
            <h1 style="margin: 10px 0px">配方用量</h1>
            <div class="content">
              <el-table border :data="newProductRules" stripe size="small">
                <el-table-column
                  v-for="header in newPruductRulesHeader"
                  :prop="header.props"
                  :label="header.label"
                  :min-width="80"
                />
              </el-table>
            </div>
          </div>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
          <!-- <el-button type="primary" @click="ensure"> 确定 </el-button> -->
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'

const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()
console.log(props.modelValue.form)

let form = props.modelValue.form
/***
 * 处理 productRules
 */
let productRules = form.productRules || []
let newProductRules = []
let newPruductRulesHeader = []
const groupMap = new Map<string, any[]>()
productRules.forEach((item: any) => {
  const condition = item.ruleCondition
  if (!groupMap.has(condition)) {
    groupMap.set(condition, [])
  }

  //处理 sort
  item.sort = item.stepSeq
  //处理 value
  groupMap.get(condition)?.push(item)
})

let keys = groupMap.keys()
const regex = /(?<=\b|')\d{19}(?=\b|'|&)/g

let subList = []
let specificationList = form.productSpecGroups || []
for (let item of specificationList) {
  if (Array.isArray(item.specList)) {
    subList.push(...item.specList)
  }
}
for (let key of keys) {
  let leftKeyItems = key.match(regex) || []
  let leftItems = leftKeyItems.map((item) => {
    let findItem = subList.find((row) => {
      return item == row.id
    })
    if (findItem) {
      return {
        id: findItem.id,
        number: findItem.number,
        name: findItem.name,
      }
    }
    return {}
  })

  let rightItem = groupMap.get(key)

  let row: any = {
    name: leftItems
      .reduce((item, next) => {
        return item + '/' + next.name
      }, '')
      .substring(1),
  }
  newPruductRulesHeader.push({
    props: 'name',
    label: '规格项',
  })

  if (Array.isArray(rightItem)) {
    for (let subRow of rightItem) {
      row[subRow.materialId] = subRow.value
      newPruductRulesHeader.push({
        props: subRow.materialId,
        label: subRow.materialName + '(g)',
      })
    }
  }
  newProductRules.push(row)
}

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false
}
</script>
<style lang="scss" scoped></style>
